<template>
  <div class="store-goods-container">
    <div class="header-buttons">
      <el-button @click="goBack">返回</el-button>
    </div>
    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="商品列表" name="goods">
        <el-table :data="goodsList" stripe>
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="itemType" label="类型" />
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="standardPrice" label="标准价格" />
          <el-table-column prop="retailPrice" label="零售价格" />
          <el-table-column prop="monthlySales" label="本月销量" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
              @size-change="handleGoodsSizeChange"
              @current-change="handleGoodsCurrentChange"
              :current-page="goodsCurrentPage"
              :page-sizes="[5, 10, 20]"
              :page-size="goodsPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="goodsTotal">
          </el-pagination>
        </div>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import {router} from "../../router/index.js";
import axios from "axios";

// 当前激活的标签页
const activeTab = ref('goods')


// 定义props
const props = defineProps({
  storeId: {
    type: Number, // 或Number（需转换）
    required: true
  }
})

// 返回上一页
const goBack = () => {
  router.back() // 替代 router.go(-1)
}

// 商品列表分页相关
const goodsCurrentPage = ref(1)
const goodsPageSize = ref(10)
const goodsTotal = ref(0)
const goodsList = ref([
  {
    "itemType": "服务",
    "itemId": 1,
    "name": "机油更换",
    "standardPrice": 280,
    "retailPrice": 300,
    "monthlySales": 1
  },
])



// 页面加载时获取数据
onMounted(() => {
  fetchGoodsList()

})

// 获取商品列表
const fetchGoodsList = () => {

  // 实际项目中应该根据storeId从API获取数据

  //前端生成本年本月，格式是字符串，"xxxx年xx月"
  const now = new Date();
  const year = now.getFullYear();
  // 月份从0开始，所以要加1
  const thisMonth = String(now.getMonth() + 1).padStart(2, '0');
  const month = `${year}年${thisMonth}月`;
  // const month = `2025年06月`;

  axios.get(`/carcenter-service-order/appointment-detail/getProductServiceListByStoreId/${props.storeId}/${month}`).then(resp => {
    goodsList.value = resp.data.data;
    goodsTotal.value = resp.data.data.length
  })

  const startIndex = (goodsCurrentPage.value - 1) * goodsPageSize.value
  const endIndex = startIndex + goodsPageSize.value

}



// 商品分页事件处理
const handleGoodsSizeChange = (newSize) => {
  goodsPageSize.value = newSize
  fetchGoodsList()
}

const handleGoodsCurrentChange = (newPage) => {
  goodsCurrentPage.value = newPage
  fetchGoodsList()
}



// 标签页切换事件
const handleTabClick = (tab) => {
  activeTab.value = tab.name
}
</script>

<style scoped>
.header-buttons {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.store-goods-container {
  padding: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
